<template>
  <div class="mt-16 mb-8">
    <a-space>
      <a-input :style="{width:'320px'}" placeholder="请输入项目名" allow-clear v-model="projectName"/>
      <a-input :style="{width:'320px'}" placeholder="请输入项目唯一编号" allow-clear v-model="projectCode"/>
      <a-button type="primary" @click="initData">搜索</a-button>
    </a-space>
  </div>
  <div class="w-full text-right mb-3">
    <a-button type="primary" status="success" @click="addModalVisible=true">新增</a-button>
  </div>
  <a-table
      :columns="columns"
      :data="tableData"
      :loading="loading"
      :pagination="page"
      @page-change="changePage"
      bordered="true">
    <template #optional="{ record }">
      <!--      <a-button @click="$modal.info({ title:'Name', content:record.projectName })">编辑</a-button>-->
      <a-space>
        <a-button status="success" @click="openEditModal(record)">编辑</a-button>
        <a-popconfirm content="删除后无法恢复，您确定要删除吗?" @ok="deleteProject(record)">
          <a-button status="danger">删除</a-button>
        </a-popconfirm>
      </a-space>
    </template>
    <template #ruleGroupNum="{ record }">
      <span class="underline underline-offset-4 text-blue-600 cursor-pointer" @click="jumpToChartList(record.projectCode)">{{ record.ruleGroupNum }}</span>
    </template>
  </a-table>
  <a-modal v-model:visible="editModalVisible" :title="editModalTitle" @ok="editProject" @close="clearForm">
    <a-form :model="form">
      <a-form-item field="projectCode" label="项目唯一编号">
        <a-input v-model="form.projectCode" disabled/>
      </a-form-item>
      <a-form-item field="projectTitle" label="项目名称">
        <a-input v-model="form.projectName"/>
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal v-model:visible="addModalVisible" title="新增项目" @ok="addProject" @close="clearForm">
    <a-form :model="form">
      <a-form-item field="projectTitle" label="项目名称">
        <a-input v-model="form.projectName"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {reactive, ref} from 'vue';
import {_} from "@/http/index.js";
import router from "@/router/index.js";

export default {
  setup() {
    const columns = [
      {
        title: '项目唯一编号',
        dataIndex: 'projectCode',
      },
      {
        title: '项目名称',
        dataIndex: 'projectName',
      },
      {
        title: '规则组数量',
        slotName: 'ruleGroupNum',
      },
      {
        title: '操作',
        slotName: 'optional'
      }
    ];
    let tableData = ref([]);
    let loading = ref(false)
    let projectName = ref('')
    let projectCode = ref('')
    let page = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: true
    })
    let editModalVisible = ref(false);
    let addModalVisible = ref(false);
    const form = ref({
      projectName: '',
      projectCode: ''
    });
    let editModalTitle = ref('编辑项目')

    /**
     * 初始化数据
     * @returns {Promise<void>}
     */
    async function initData() {
      loading.value = true
      await _.project.get({
        query: {
          projectName: projectName.value,
          projectCode: projectCode.value,
          current: page.value.current,
          size: page.value.pageSize
        }
      }).then(({data}) => {
        let records = data.data
        page.value.total = data.total
        tableData.value = []
        records.forEach((item, index) => {
          tableData.value.push({
            key: index,
            projectCode: item.projectCode,
            projectName: item.projectName,
            ruleGroupNum: item.chartList.length
          })
        })
        loading.value = false
      })
    }

    /**
     * 打开编辑项目弹窗
     * @param projectInfo 项目信息
     */
    function openEditModal(projectInfo) {
      console.log(projectInfo)
      form.value.projectName = projectInfo.projectName
      form.value.projectCode = projectInfo.projectCode
      editModalTitle.value = form.value.projectCode + '-编辑项目'
      editModalVisible.value = true
    }

    /**
     * 编辑项目
     */
    async function editProject() {
      await _.project.join(`/${form.value.projectCode}`).patch({
        body: {
          name: form.value.projectName
        }
      }).then(({data}) => {
        initData()
      })
    }

    /**
     * 删除项目
     * @param projectInfo 项目信息
     * @returns {Promise<void>} 无返回值
     */
    async function deleteProject(projectInfo) {
      await _.project.join(`/${projectInfo.projectCode}`).delete().then(({data}) => {
        console.log(data)
        initData()
      })
    }

    /**
     * 新增项目
     * @returns {Promise<void>} 无返回值
     */
    async function addProject() {
      await _.project.post({
        body: {
          name: form.value.projectName
        }
      }).then(({data}) => {
        initData()
      })
    }

    /**
     * 清空表单
     */
    function clearForm() {
      form.value.projectName = ''
      form.value.projectCode = ''
    }

    /**
     * 切换页码
     * @param nextPageNum 下一页码
     */
    function changePage(nextPageNum) {
      page.value.current = nextPageNum
      initData()
    }

    function jumpToChartList(projectCode) {
      router.push(`/chartList?projectCode=${projectCode}`)
    }

    // 初始化数据
    initData()
    return {
      columns,
      tableData,
      loading,
      initData,
      projectName,
      projectCode,
      form,
      editModalVisible,
      addModalVisible,
      openEditModal,
      editModalTitle,
      editProject,
      deleteProject,
      addProject,
      clearForm,
      page,
      changePage,
      jumpToChartList
    }
  },
}
</script>
